<template>
  <div class="lesson">
    <list class="lesson_list">

      <header class="lesson_header">

        <div ref="test" class="lesson_top" @appear="move">

          <div class="lesson_top_li">
            <image class="lesson_top_li_img" resize="cover" :src="img" ></image>
            <div class="lesson_top_li_intro">
              <text class="lesson_top_li_name">张龙1</text>
              <div class="lesson_top_li_gift">
                <text class="lesson_top_li_gift_text">赠送老师</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_name">城堡</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_unit">一座</text>
                <text class="lesson_top_li_gift_text">祝老师春节快乐!</text>
              </div>
            </div>
          </div>
          <div class="lesson_top_li">
            <image class="lesson_top_li_img" resize="cover" :src="img" ></image>
            <div class="lesson_top_li_intro">
              <text class="lesson_top_li_name">张龙2</text>
              <div class="lesson_top_li_gift">
                <text class="lesson_top_li_gift_text">赠送老师</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_name">城堡</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_unit">一座</text>
                <text class="lesson_top_li_gift_text">祝老师春节快乐!</text>
              </div>
            </div>
          </div>
          <div class="lesson_top_li">
            <image class="lesson_top_li_img" resize="cover" :src="img" ></image>
            <div class="lesson_top_li_intro">
              <text class="lesson_top_li_name">张龙3</text>
              <div class="lesson_top_li_gift">
                <text class="lesson_top_li_gift_text">赠送老师</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_name">城堡</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_unit">一座</text>
                <text class="lesson_top_li_gift_text">祝老师春节快乐!</text>
              </div>
            </div>
          </div>
          <div class="lesson_top_li">
            <image class="lesson_top_li_img" resize="cover" :src="img" ></image>
            <div class="lesson_top_li_intro">
              <text class="lesson_top_li_name">张龙4</text>
              <div class="lesson_top_li_gift">
                <text class="lesson_top_li_gift_text">赠送老师</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_name">城堡</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_unit">一座</text>
                <text class="lesson_top_li_gift_text">祝老师春节快乐!</text>
              </div>
            </div>
          </div>
          <div class="lesson_top_li">
            <image class="lesson_top_li_img" resize="cover" :src="img" ></image>
            <div class="lesson_top_li_intro">
              <text class="lesson_top_li_name">张龙5</text>
              <div class="lesson_top_li_gift">
                <text class="lesson_top_li_gift_text">赠送老师</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_name">城堡</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_unit">一座</text>
                <text class="lesson_top_li_gift_text">祝老师春节快乐!</text>
              </div>
            </div>
          </div>
          <div class="lesson_top_li">
            <image class="lesson_top_li_img" resize="cover" :src="img" ></image>
            <div class="lesson_top_li_intro">
              <text class="lesson_top_li_name">张龙6</text>
              <div class="lesson_top_li_gift">
                <text class="lesson_top_li_gift_text">赠送老师</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_name">城堡</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_unit">一座</text>
                <text class="lesson_top_li_gift_text">祝老师春节快乐!</text>
              </div>
            </div>
          </div>
          <div class="lesson_top_li">
            <image class="lesson_top_li_img" resize="cover" :src="img" ></image>
            <div class="lesson_top_li_intro">
              <text class="lesson_top_li_name">张龙7</text>
              <div class="lesson_top_li_gift">
                <text class="lesson_top_li_gift_text">赠送老师</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_name">城堡</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_unit">一座</text>
                <text class="lesson_top_li_gift_text">祝老师春节快乐!</text>
              </div>
            </div>
          </div>
          <div class="lesson_top_li">
            <image class="lesson_top_li_img" resize="cover" :src="img" ></image>
            <div class="lesson_top_li_intro">
              <text class="lesson_top_li_name">张龙8</text>
              <div class="lesson_top_li_gift">
                <text class="lesson_top_li_gift_text">赠送老师</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_name">城堡</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_unit">一座</text>
                <text class="lesson_top_li_gift_text">祝老师春节快乐!</text>
              </div>
            </div>
          </div>
          <div class="lesson_top_li">
            <image class="lesson_top_li_img" resize="cover" :src="img" ></image>
            <div class="lesson_top_li_intro">
              <text class="lesson_top_li_name">张龙9</text>
              <div class="lesson_top_li_gift">
                <text class="lesson_top_li_gift_text">赠送老师</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_name">城堡</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_unit">一座</text>
                <text class="lesson_top_li_gift_text">祝老师春节快乐!</text>
              </div>
            </div>
          </div>
          <div class="lesson_top_li">
            <image class="lesson_top_li_img" resize="cover" :src="img" ></image>
            <div class="lesson_top_li_intro">
              <text class="lesson_top_li_name">张龙10</text>
              <div class="lesson_top_li_gift">
                <text class="lesson_top_li_gift_text">赠送老师</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_name">城堡</text>
                <text class="lesson_top_li_gift_text lesson_top_li_gift_unit">一座</text>
                <text class="lesson_top_li_gift_text">祝老师春节快乐!</text>
              </div>
            </div>
          </div>

        </div>

      </header>

      <cell class="lesson_cell">
        <slider class="lesson_slider" interval="5000" auto-play="true">
          <image class="user_top_img" src="../src/assets/img/banner.jpg"></image>
          <image class="user_top_img" src="../src/assets/img/banner.jpg"></image>
          <image class="user_top_img" src="../src/assets/img/banner.jpg"></image>
        </slider>
      </cell>
      <cell class="lesson_cell lesson_link">
        <div class="lesson_link_box">
          <text class="lesson_link_box_text">购买VIP会员</text>
        </div>
        <div class="lesson_link_box">
          <text class="lesson_link_box_text">送朋友成功</text>
        </div>
        <div class="lesson_link_box">
          <text class="lesson_link_box_text">感恩老师</text>
        </div>
        <text class="lesson_link_number">共26部</text>
      </cell>
      <cell class="lesson_cell lesson_course lesson_courseFirst">
        <image class="lesson_courseFirst_img" src="../src/assets/img/course.jpg"></image>
        <div class="lesson_courseFirst_info">
          <text class="lesson_courseFirst_info_title">20、通过易经了解2018后五年哪些行业最旺？</text>
          <text class="lesson_courseFirst_info_describe">2018年后，老百姓究竟投资什么项目最为赚钱？作为土运代表的房地产行业未来走势究竟如何发展？</text>
          <text class="lesson_courseFirst_info_time">01-01&nbsp;&nbsp;&nbsp;&nbsp;时长：08:26</text>
        </div>
      </cell>
      <cell class="lesson_cell lesson_course lesson_courseAfter">
        <image class="lesson_courseAfter_img" src="../src/assets/img/course.jpg"></image>
        <div class="lesson_courseAfter_info">
          <text class="lesson_courseAfter_info_title">20、通过易经了解2018后五年哪些行业最旺？</text>
          <text class="lesson_courseAfter_info_describe">2018年后，老百姓究竟投资什么项目最为赚钱？作为土运代表的房地产行业未来走势究竟如何发展？</text>
          <text class="lesson_courseAfter_info_time">01-01&nbsp;&nbsp;&nbsp;&nbsp;时长：08:26</text>
        </div>
      </cell>
      <cell class="lesson_cell lesson_course lesson_courseAfter">
        <image class="lesson_courseAfter_img" src="../src/assets/img/course.jpg"></image>
        <div class="lesson_courseAfter_info">
          <text class="lesson_courseAfter_info_title">20、通过易经了解2018后五年哪些行业最旺？</text>
          <text class="lesson_courseAfter_info_describe">2018年后，老百姓究竟投资什么项目最为赚钱？作为土运代表的房地产行业未来走势究竟如何发展？</text>
          <text class="lesson_courseAfter_info_time">01-01&nbsp;&nbsp;&nbsp;&nbsp;时长：08:26</text>
        </div>
      </cell>
      
    </list>
  </div>
</template>

<style scoped>
  .lesson{}
  .lesson_list{}

  .lesson_header{overflow: hidden;width: 750px;height: 96px;}
  .lesson_top{width: 750px;background-color: #000;}

  .lesson_top_li{flex-direction: row;align-items: center;justify-content: flex-start;width: 750px;height:96px;}
  .lesson_top_li_img{width: 72px;height: 72px;border-radius: 36px;margin: 0 20px;}
  .lesson_top_li_intro{}
  .lesson_top_li_name{color: #fff;font-size: 36px;}
  .lesson_top_li_gift{flex-direction: row;align-items: flex-end;justify-content: flex-start;margin-top: -15px;}
  .lesson_top_li_gift_text{color: #fff;font-size: 30px;}
  .lesson_top_li_gift_name{color: #ffab00;}
  .lesson_top_li_gift_unit{margin-left: 10px;color: #ffab00;font-size: 36px;}

  .lesson_cell{width: 750px;}
  .lesson_slider{width: 750px;height: 426px;}
  .user_top_img{width: 750px;height: 426px;}

  .lesson_link{flex-direction: row;align-items: center;justify-content: flex-start;border-bottom-width:1px;border-bottom-style: solid;border-bottom-color: #B4B4B5;height: 88px;background-color: #fff;box-shadow: 0px 14px 0px rgba(0, 0, 0, 0.2);}
  .lesson_link_box{justify-content: center;height: 60px;background-color:#E60012;margin-left: 10px;border-radius: 10px;padding: 0 10px;}
  .lesson_link_number{color: #000;margin-left: 30px;}
  .lesson_link_box_text{color: #fff;}

  .lesson_course{border-bottom-width:1px;border-bottom-style: solid;border-bottom-color: #B4B4B5;}
  .lesson_courseFirst{border-bottom-width:1px;border-bottom-style: solid;border-bottom-color: #B4B4B5;height: 640px;padding-top: 14px;}
  .lesson_courseFirst_img{width: 750px;height: 420px;}
  .lesson_courseFirst_info{justify-content:center;height:220px;padding: 0 10px;}
  .lesson_courseFirst_info_title{font-size: 34px;}
  .lesson_courseFirst_info_describe{color: #8B8A8A;font-size: 30px;margin: 5px 0;height: 80px;}
  .lesson_courseFirst_info_time{color: #8B8A8A;}  

  .lesson_courseAfter{flex-direction: row;align-items: center;justify-content: space-between;height: 268px;}
  .lesson_courseAfter_img{width: 340px;height: 190px;margin-left: 10px;}
  .lesson_courseAfter_info{justify-content: center;width: 375px;margin:0 10px 0 0;}
  .lesson_courseAfter_info_title{font-size: 34px;}
  .lesson_courseAfter_info_describe{height: 80px;color: #8B8A8A;font-size: 30px;margin: 5px 0;}
  .lesson_courseAfter_info_time{color: #8B8A8A;}  
</style>

<script>
const animation = weex.requireModule('animation')
const modal = weex.requireModule('modal')
module.exports = {
  data () {
    return {
      img:'../src/assets/img/1.jpg',
    }
  },
  methods: {
    move () {
      var testEl = this.$refs.test;
      animation.transition(testEl, {
        styles: {
          transform: 'translate(0px, -864px)',
          transformOrigin: 'left top'
        },
        duration: 36000, //ms
        timingFunction: 'linear',
        delay: 0,//ms
      }, function (e) {
        // modal.toast({ message: 'animation finished.' })
        console.log("finished");
      })
    },
  }
}
</script>